import React, {useEffect, useRef, useState} from 'react';
import './index.less';
import Project from '../../components/project';
import TopRuler from '../../components/topRuler';
import LeftRuler from '../../components/leftRuler';
function Edit() {
    const [x, setX] = useState(-1);
    const bodyCenterRef = useRef(null);
    const [y, setY] = useState(-1);
    const [scale, setScale] = useState(1);
    const docMove = (e: {deltaX: number; deltaY: number}) => {
        const {deltaX, deltaY} = e;
        if (deltaY !== parseInt(deltaY + '')) {
            const rate: number = deltaY / 100;
            if (scale - rate <= 0.4 || scale - rate >= 2) {
                return;
            }
            const step = 1000;
            const ret = Math.floor(rate * step) / step;
            setScale(scale - ret);
        } else {
            setX(x - deltaX);
            setY(y - deltaY);
        }
    };
    const resetPosition = () => {
        setX(0);
        setY(0);
        setScale(1);
    };
    useEffect(() => {
        const {current} = bodyCenterRef;
        resetPosition();
        if (current) {
            //@ts-ignore
            current.addEventListener(
                'wheel',
                (e: Event) => {
                    e.preventDefault();
                },
                {passive: false}
            );
        }
    }, []);
    return (
        <div className="app edit-page">
            <div className="app-header">
                <div className="menu p-row-8">
                    <Project></Project>
                </div>
            </div>
            <div className="app-body">
                {/* <div className="screen"></div> */}
                <div className="body-left">
                    <div className="coverage"></div>
                </div>
                <div className="body-center" ref={bodyCenterRef} onWheel={docMove}>
                    <TopRuler left={x} scale={scale}></TopRuler>
                    <LeftRuler top={y}></LeftRuler>
                    <div className="return00" onClick={resetPosition}></div>
                    {/* scale(${scale}) */}
                    <div className="test" style={{transform: ` matrix(${scale}, 0, 0, ${scale}, ${x}, ${y})`}}>
                        <div>ss</div>
                    </div>
                </div>
                <div className="body-right"></div>
            </div>
            <div className="app-footer"></div>
        </div>
    );
}

export default Edit;
